// 
<script>
import Bmob from "hydrogen-js-sdk";
export default {
  data () {
    return {
      dataList: [] // 存储从数据库获取的数据
    };
  },
  mounted () {
    this.getList();
  },

  methods: {
    getList () {
      const arr = Bmob.Query("lost")
      arr.find().then(res => {
        console.log(res);
        this.dataList = res;
        console.log(this.dataList);
      });

    },
    OpenFound () {
      console.log('卡片被点击了')
    }

  }
}

</script>
<template>
  <el-menu
    mode="horizontal"
    :default-active="selectedIndex"
    @select="selected"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    style="height: 50px; width: 100%;"
  >
    <el-menu-item index="1"><router-link
        to="/"
        class="custom-link"
      >寻物</router-link></el-menu-item>
    <el-menu-item index="2"><router-link
        to="/lost"
        class="custom-link"
      >找物</router-link></el-menu-item>
    <el-menu-item index="3"><router-link
        to="/AddInfo"
        class="custom-link"
      >添加失物招领</router-link></el-menu-item>
    <el-menu-item index="4"><router-link
        to="/AddLost"
        class="custom-link"
      >添加寻物启事</router-link></el-menu-item>
  </el-menu>
  <div style="position: fixed; top: 0; right: 0; margin: 20px;">
    <router-link
        to="/login"
        class="custom-link"
      >
  <el-button color="#626aef" :dark="isDark" v-if="sessionToken!==null">个人中心</el-button>
  <el-button color="#626aef" :dark="isDark" v-else>登录</el-button>
  </router-link>
</div>

  <h1>找物</h1>
  <div class="list">
    {{objectId}}
  </div>
  <div class="card-container">
    <el-card
      v-for="item in dataList"
      :key="item.objectId"
      style="max-width: 430px"
      class="custom-card"
      shadow="hover"
      @click="OpenFound"
    >
      <router-link
        :to="'/lostinfo/'+ item.objectId"
        class="card-link"
      >
        <h4  class="card-title">
          {{item.title}}
        </h4>
        <img
          src="../assets/erji.png"
          style="width: 100%"
        />
      </router-link>
    </el-card>
  </div>
</template>
<style>
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.custom-card {
  width: 350px;
  transition: all 0.5s;
  border: 1px solid transparent;
  border-radius: 15px;
  box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
  margin: 10px 0;
}
.custom-card .card-title {
  color: #333; /* 设置文字颜色 */
  text-decoration: none;
}
.custom-card:hover .card-title {
  color: #00aeff; /* 设置悬停时文字颜色 */
}
.el-card:hover {
  margin-top: -5px;
}
.card-link {
  text-decoration: none; /* 取消链接默认下划线 */
  color: inherit; /* 继承父元素的文字颜色 */
}
</style>
